<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应性对象</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="Application">     
    </div>
    <script>   
        const App = Vue.createApp({
            setup () {
                let myObject = Vue.reactive({
                    value:0
                })
                let { value } = Vue.toRefs(myObject)
                function click() {
                    value.value += 1
                    console.log(value.value)
                }
                return {
                    value,
                    click
                }
            },
            template:`
                <h1>测试数据：{{value}}</h1>
                <button @click="click">点击</button>
            `
        })
        App.mount("#Application") 
    </script>
</body>
</html>